<template>
    <div class="page_container">
        <DataTableBar :data="tableData" :columns="columns" :config="config"
            :total="total" :pages="pages" :loading="loading"
            @search="search" @reset="searchReset" @refresh="refresh"
            @currentChange="currentChange" @sizeChange="sizeChange"
            @addBefore="addBefore">
            <template #tableoperlast>
                <div class="tag_container">
                    <div class="margin-bottom-md">
                        <h3>员工附件：</h3>
                        <el-space>
                            <el-tag>猎魔人</el-tag>
                            <el-tag>祖国人</el-tag>
                            <el-tag>好厚米</el-tag>
                        </el-space>
                    </div>
                    <div>
                        <h3>分类名称：</h3>
                        <el-space>
                            <el-tag>猎魔人</el-tag>
                            <el-tag>祖国人</el-tag>
                            <el-tag>好厚米</el-tag>
                        </el-space>
                    </div>
                </div>
            </template>
            <template v-slot:tablerow="scope">
                <el-button type="primary" link class="linkBtn">下 载</el-button>
            </template>
            <template v-slot:name="scope">
                <el-button type="primary" link v-if="scope.row.type">{{ scope.row.name || '-' }}</el-button>
                <span v-else>{{ scope.row.name || '-' }}</span>
            </template>
            <template v-slot:tag="scope">
                <el-tag v-for="tItem in scope.row.tag" style="margin-right: 3px;">{{ tItem.label }}</el-tag>
                <span v-if="!scope.row.tag || scope.row.tag.length <= 0">-</span>
            </template>
            <template v-slot:time="scope">
                <span>{{ formatDate.dateTimeAllFormat( scope.row.time || '-') }}</span>
            </template>
        </DataTableBar>
    </div>
</template>

<script setup>
    // 员工附件
    import { ref, onMounted } from "vue";
    import { ElMessage } from 'element-plus'
    import { formatDate } from "@/utils/fomart"
    import DataTableBar from "@/components/DataComponents/DataTableBar.vue"
    const { proxy } = getCurrentInstance();
    const pages = ref({ page_current: 1, page_size: 10 });
    const total = ref(0);
    const loading = ref(false);
    const searchParams = ref({});
    const selectrow = ref({});
    const operState = ref(false);
    const tableData = ref([
        {name: '前言', type: 0,time: '2023-12-30 08:00',},
        {name: '猎魔手册', type: 1, time: '2023-12-30 08:00',}
    ]);
    const columns = ref([
        { title: '姓名',key: 'name', minWidth: 250, search: true, tableCustom: true,},
        { title: '身份证号码', key: 'idcard', width: 100, align: 'center', },
        { title: '档案编号',key: 'code', width: 100, align: 'center', },
        { title: '档案柜',key: 'gname', width: 140, },
        { title: '文件名称',key: 'filename', width: 140,},
        { title: '标签',key: 'tag', width: 140, },
        { title: '文件类型',key: 'type', width: 140, },
        { title: '上传日期',key: 'time', width: 140,},
        { title: '上传人',key: 'user', width: 140, },
        { title: '更新时间',key: 'time', minWidth: 160, tableCustom: true, },
    ]);
    const config = ref({
        index: true,
        addBtnHide: true,
        editBtnHide: true,
        removeBtnHide: true,
        operBarHide: true,
        editCustom: true,
    });
    const addBefore = () => {
        operState.value = false;
        selectrow.value = {};
        createEmailDrawerShow.value = true;
    };
    const editBefore = (rowData) => {
        operState.value = true;
        selectrow.value = rowData;
        createEmailDrawerShow.value = true;
    };
    const edit = (fromData, saveState) => {
        if(operState.value){
            return
        }
    };
    const currentChange = (current) => {
        pages.value.page_current = current;
        getTablePages();
    };
    const sizeChange = (size) => {
        pages.value.page_size = size;
        getTablePages();
    };
    const refresh = () => {
        getTablePages();
    };
    const search = (searchParam) => {
        searchParams.value = searchParam.value;
        getTablePages();
    }
    const searchReset = () => {
        searchParams.value = {};
        getTablePages();
    };
    const getTablePages = () => {
        // loading.value = true;
        // emailPages({
        //     current: pages.value.page_current,
        //     size: pages.value.page_size,
        //     mailStatus: mailStatus.value,
        //     userTypes: userTypes.value,
        //     ...searchParams.value
        // }).then(res => {
        //     tableData.value = res.data.records;
        //     total.value = res.data.total;
        //     loading.value = false;
        // });
    };
    onMounted(() => {
        getTablePages();
    })
</script>
<style scoped lang="scss">
    .breadcrumb_container{
        padding: 5px 0 15px;
    }
    .tag_container{
        width: 100%;
        border: 1px solid #dcdcdc;
        border-radius: 3px;
        margin-bottom: 10px;
        padding: 10px;
        div{
            display: flex;
            h3{
                font-size: 14px;
                padding-top: 5px;
            }
        }
    }
</style>